<template>
  <div class="common-table">
    <el-table
      v-loading="loading"
      class="table-list"
      :data="tableData.list"
      :height="tableStyle"
      @sort-change='sortChange'
      @row-click='rowClick'>
      <!-- <el-table-column
        type="selection">
      </el-table-column> -->
      <el-table-column
        type="index"
        label="序号"
        width="60px">
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableTitleList"
        :key="index + 'ttl'"
        :label="item.label"
        :width="item.width"
        :prop='item.prop'
        :sortable='item.sortable'
        show-overflow-tooltip
        show-header-overflow>
        <template slot-scope="scope">
          <div v-if="item.prop === 'opt'" class="table-list-opt">
            <span class="sc-o-btn" @click="onDetail(scope.row)">详情</span>
          </div>
          <div v-if="item.prop === 'status'">
            <span :class="['circle', {
              red: scope.row[item.prop] === '0',
              blue: scope.row[item.prop] === '1',
              grey: scope.row[item.prop] === '2'
              }]"></span>
            <span v-if="scope.row[item.prop] === '0'">待接警</span>
            <span v-if="scope.row[item.prop] === '1'">处警中</span>
            <span v-if="scope.row[item.prop] === '2'" class="finished">已完成</span>
          </div>
          <span v-else class="text">
          {{ scope.row[item.prop] === null ? '-' : scope.row[item.prop]}}</span>
        </template>
      </el-table-column>
      <template slot="empty">
        <div v-if="tableResultflag" >
          <img class="table-list-empty-img" src="../assets/images/default_no_data_lg@2x.png" alt="">
          <div>暂无数据</div>
        </div>
        <div v-else>
           <img class="table-list-empty-img" src="../assets/images/commen_wujieguo@2x.png" alt="">
          <div>暂无数据</div>
        </div>
      </template>
    </el-table>
    <el-pagination
      class="pagination-list"
      :current-page="pager.pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pager.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    tableData: {
      type: Object,
      default: () => {
        return {
          list: [],
          total: 0
        }
      }
    },
    tableResultflag: {
      type: Boolean,
      default: true
    },
    tableTitleList: {
      type: Array,
      default: () => []
    },
    pager: {
      type: Object,
      default: () => {
        return {
          pageNo: 1,
          pageSize: 20
        }
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    bussinessTitle: {
      type: String,
      default: () => ''
    },
    editOver: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {}
  },
  computed: {
    tableStyle () {
      return 'calc(100% - 57px)'
    }
  },
  mounted () {
    console.log(this.tableData)
  },
  methods: {
    /**
     * @desc 按钮操作
     * @param {Object} row 当前行数据
     * @param {String} type agree/refuse
     */
    handleOperate (row, type) {
      this.$emit('reciveOperateMsg', row, type)
    },
    /**
     * @desc 表格每页展示数量
     * @param {Number} val 一页展示条数
     */
    handleSizeChange (val) {
      this.pager.pageSize = val
      this.$emit('recivePagerMsg', this.pager)
    },
    /**
     * @desc 翻页
     * @param {Number} val 跳转至的页数
     */
    handleCurrentChange (val) {
      this.pager.pageNo = val
      this.$emit('recivePagerMsg', this.pager)
    },
    // 多选
    // handleSelectionChange (selections) {
    //   this.$emit('handleSelectionsChange', selections)
    // },
    // 查看详情
    // onDetail (row) {
    //   console.log(row)
    //   this.$emit('showDetail', row)
    // }
    sortChange (column) {
      this.$emit('changeTableSort', column)
    },
    rowClick (row, event, column) {
      this.$emit('rowClick', row)
    }
  }
}
</script>

<style lang="scss">
.common-table {
  width: 100%;height: 100%;
  .table-list {
    width: 100%;height: 100%;
    border: none;
    &:after, &:before {background-color: transparent;}
    .sc-o-btn { color: #5AA1F9;cursor: pointer; }
    .sc-o-btn-g { color: rgba(0,0,0,0.40);cursor: not-allowed; }
    .el-table__body-wrapper:before {height: 0;}
    .badge-status {
      width: 56px;
      height: 22px;
      border-radius: 1px;
      border: 0;
      display: inline-block;
      font-size: 12px;
      text-align: center;
      line-height: 14px;
      &.blue{
        background: rgba(32, 128, 247, 0.10);
        color: #2080f7;
      }
      &.red {
        background: rgba(231,37,40,0.10);
        color: #E72528;
      }
      &.greenBtn{
        background: rgba($color: #00B69D, $alpha: 0.1);
        color:  #00B69D;
      }
    }
    .circle{
      height: 8px;
      width: 8px;
      display: inline-block;
      margin-right: 8px;
      border-radius: 50%;
      &.red{
        background: rgba($color: #E72528, $alpha: 0.8);
      }
      &.blue{
        background: #2080F7;
      }
      &.grey{
        background: #D8D8D8 ;
      }
    }
    .finished{
      color: rgba($color: #000000, $alpha: 0.3);
    }
    .text{
      font-size: 14px;
      line-height: 14px;
      &.blue{
        color: #2080F7;
      }
      &.red{
        color: rgba(231,37,40);
      }
      &.grey{
        color: rgba(0,0,0,0.70);
      }
      &.green{
        color: #00B69D;
      }
      &.centerText{
        display: inline-block;
        width: 56px;
        height: 22px;
        text-align: center;
      }
    }
    .table-list-empty-img{
      height: 140px;
      width: 168px;
    }
  }
  .pagination-list {
    border-top: 1px solid #c4c4c4;
    padding: 0px 30px 0 10px;
  }
}
</style>
